<!DOCTYPE html>
<!-- 声明文档类型为 HTML5，告知浏览器使用 HTML5 标准解析页面 -->
<html lang="zh-CN">
<!-- 定义 HTML 文档的根元素，设置语言为简体中文 -->

<head>
    <!-- 文档头部，包含页面元数据、样式表链接、脚本引用等信息 -->
    <meta charset="UTF-8">
    <!-- 设置文档的字符编码为 UTF-8，支持全球多种语言字符 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 响应式设计设置，让页面宽度适配设备宽度，初始缩放比例为 1 -->
    <title>熙康体检系统 - 专业健康管理平台</title>
    <!-- 定义网页标题，显示在浏览器标签页上 -->
    <link rel="stylesheet" href="css/login.css">
    <!-- 链接外部 CSS 样式表，用于定义页面的样式 -->
</head>

<body>
    <!-- 文档主体，包含页面中所有可见的内容 -->
    <canvas id="dynamicCanvas"></canvas>
    <!-- 创建一个画布元素，可通过 JavaScript 绘制图形、动画等动态效果，ID 为 dynamicCanvas -->
    <div class="login-container">
        <!-- 定义一个容器 div，用于包裹登录相关的所有元素，通过类名 login-container 可在 CSS 中设置样式 -->
        <div class="logo">
            <!-- 定义一个容器 div，用于显示 logo 相关内容 -->
            <h1>熙康健康管理中心</h1>
            <!-- 一级标题，显示机构名称 -->
        </div>

        <form action="wel.html" method="post">
            <!-- 创建一个表单，提交数据到 wel.html 页面，使用 POST 方法传输数据 -->
            <div class="form-group">
                <!-- 定义一个表单组 div，用于组织表单元素，方便样式设置 -->
                <i class="fas fa-user"></i>
                <!-- Font Awesome 图标，显示用户图标 -->
                <input type="text" class="form-control" placeholder="请输入用户名/手机号" required>
                <!-- 创建一个文本输入框，用于输入用户名或手机号，通过类名设置样式， placeholder 提示用户输入内容， required 属性表示该字段为必填项 -->
            </div>

            <div class="form-group">
                <!-- 定义一个表单组 div，用于组织表单元素，方便样式设置 -->
                <i class="fas fa-lock"></i>
                <!-- Font Awesome 图标，显示锁图标 -->
                <input type="password" class="form-control" placeholder="请输入密码" required>
                <!-- 创建一个密码输入框，用于输入密码，通过类名设置样式， placeholder 提示用户输入内容， required 属性表示该字段为必填项 -->
            </div>
            <div class="extra-options">
                <!-- 定义一个容器 div，用于放置额外的选项 -->
                <div class="remember-me">
                    <!-- 定义一个容器 div，用于放置验证码相关内容 -->
                    <img src="assets/img/authCode.jpg" alt="验证码" style="height: 30px;">
                    <!-- 插入验证码图片，设置图片高度为 30px，alt 属性用于图片加载失败时显示替代文本 -->
                    <input type="text" style="height: 30px; margin-left: 10px;" placeholder="请输入验证码" required>
                    <!-- 创建一个文本输入框，用于输入验证码，设置高度和左边距， placeholder 提示用户输入内容， required 属性表示该字段为必填项 -->
                    <span style="margin-left: 8px;color: rgb(0, 82, 214);font-size: 10px;">看不清楚，换一张</span>
                    <!-- 显示文本提示，设置左边距、颜色和字体大小 -->
                </div>

            </div>
            <div class="extra-options">
                <!-- 定义一个容器 div，用于放置额外的选项 -->
                <div class="remember-me">
                    <!-- 定义一个容器 div，用于放置“记住密码”选项 -->
                    <input type="checkbox" id="remember">
                    <!-- 创建一个复选框，ID 为 remember -->
                    <label for="remember">记住密码</label>
                    <!-- 创建一个标签，关联 ID 为 remember 的复选框，点击标签可选中复选框 -->
                </div>
                <a href="#" class="forgot-password">忘记密码?</a>
                <!-- 创建一个超链接，用于跳转到忘记密码页面，通过类名设置样式 -->
            </div>

            <button type="submit" class="btn-login">登 录</button>
            <!-- 创建一个提交按钮，点击后提交表单数据，通过类名设置样式 -->

            <div class="register-link">
                <!-- 定义一个容器 div，用于放置注册链接 -->
                还没有账号? <a href="#">立即注册</a>
                <!-- 显示文本提示并创建一个超链接，用于跳转到注册页面 -->
            </div>

            <div class="security-note">
                <!-- 定义一个容器 div，用于显示安全提示信息 -->
                <i class="fas fa-shield-alt"></i> 我们采用金融级加密技术保护您的个人信息安全
                <!-- 显示 Font Awesome 盾牌图标和安全提示文本 -->
            </div>
        </form>
    </div>
    <script src="js/login.js">

    </script>
    <!-- 引入外部 JavaScript 文件，该文件包含动态效果功能 -->
</body>

</html>